<template>
	<view class="subscriber-data">
		<view class="notlog" @click.stop="routeLoginOrsetting">
			<u-image :src="userQuery.avatar?userQuery.avatar:$IMG_URL('/static/newVersion/logo1.png')" mode="aspectFill"
				:loading-icon="$IMG_URL('/static/loading/loading.gif')" :error-icon="$IMG_URL('/static/newVersion/logo1.png')" width="128"
				height="128" :lazy-load="true"></u-image>
		</view>
		<view class="right" @click.stop="routeLoginOrsetting">
			<view class="flex">
				<view class="title">
					{{userQuery.nickname?userQuery.nickname:'点击登录'}}
				</view>
				<view class="content">
					{{userQuery.mobile?userQuery.mobile:'登录查看更多精彩内容'}}
				</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			userQuery: {
				type: Object,
				default: {},
				required: true
			}
		},
		data() {
			return {

			}
		},
		methods: {
			routeLoginOrsetting() {
				if (JSON.stringify(this.userQuery) === '{}') {
					uni.navigateTo({
						url: '/pageB/user/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subscriber-data {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750rpx;
		padding: 48rpx 32rpx 48rpx;

		.notlog {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			border: 2rpx solid #ffffff;
			overflow: hidden;
			margin-right: 20rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: 1;

			.flex {
				display: flex;
				flex-direction: column;
				flex: 1;

				.title {
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC-Heavy;
					font-weight: 800;
					text-align: left;
					color: #000000;
					margin-bottom: 4rpx;
				}

				.content {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}
			}

		}
	}
</style>